<script setup>
import {computed, ref} from "vue";

const prop = defineProps({
  parse: Number,
  upload: Number,
  name: String,
  lackSpace: Boolean
})

const value = computed(() => {
  return prop.parse < 100 ? prop.parse : prop.upload
})

const title = computed(() => {
  return prop.parse < 100 ? "解析中" : "上传中"
})

const status = computed(() => {
  return prop.parse < 100 ? "" : "success"
})

const space = computed(() => {
  return prop.lackSpace
})

</script>

<template>
  <span style="color: black;font-size: 13px">{{ name }}</span>
    <el-progress v-if="parse < 100" :percentage="value" :stroke-width="10" :status="status"
                 :duration="upload < 100 ? 20 : 0" striped striped-flow>
      <span v-if="upload < 100" style="color: black;font-size: 13px">{{ title }}</span>
    </el-progress>
    <el-progress v-else-if="upload <= 100 && !space" :percentage="value" :stroke-width="10"
                 :status="status" :duration="upload < 100 ? 20 : 0" striped striped-flow>
      <span v-if="upload < 100" style="color: black;font-size: 13px">{{ title }}</span>
    </el-progress>

    <el-progress v-if="space" :percentage="value" :stroke-width="10" status="exception" duration="0" striped
                 striped-flow>
      <span style="color: red;font-size: 13px">空间不足</span>
    </el-progress>
</template>

<style scoped lang="scss">
span {
  cursor: pointer;
}
</style>